<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>幸运乐翻天</title>
    <link href="./static/css/app.css?time=<%=System.currentTimeMillis()%>" rel="stylesheet">
    <link rel="stylesheet" href="./static/css/swiper.min.css?time=<%=System.currentTimeMillis()%>" >
</head>

<body>
<div id="app" class="bg">
    <jsp:include page="top.jsp"/>
    <div class="continer">
        <div id="shop" class="shop" >
                      <%--<div class="slider-wrapper">--%>
                <%--<div class="slider-content">--%>
                    <%--<div class="slider">--%>
                        <%--<div class="slider-group"--%>
                             <%--style="width: 8250px; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(-750px, 0px) translateZ(0px);">--%>
                            <%--<c:forEach items="${sliderList}" var="slider" varStatus="status">--%>
                                <%--<div class=" slider-item" style="width: 375px;">恭喜<span>${slider.nickName}</span>中${slider.bonus}乐豆</div>--%>
                            <%--</c:forEach>--%>
                        <%--</div>--%>
                        <%--<!---->--%>
                    <%--</div>--%>
                <%--</div>--%>
            <%--</div>--%>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <c:forEach items="${sliderList}" var="slider" varStatus="status">
                        <div class="swiper-slide slider">恭喜<span>${slider.nickName}</span>中${slider.bonus}乐豆</div>
                    </c:forEach>

                </div>
                <!-- Add Pagination -->

            </div>

            <ul class="content">
                <c:forEach items="${goodsList}" var="goods" varStatus="status">
                    <li id="${status.index}" class="item">
                        <div class="imgwapper"><img src="${goods.image}" alt="${goods.name}"></div>
                        <div class="desc">
                                ${goods.name}
                        </div>
                        <div class="changePrice"><i></i>${goods.changePrice}
                        </div>
                        <button type="button" name="button" class="huan" data="${goods.changePrice}" data-id="${goods.goodsId}">兑换</button>
                    </li>
                </c:forEach>
            </ul>
            <div class="malert" id="changeSuccess">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="duisuc" style="display: none;">
                        <div class="text">
                            商品已发放，请点击查看
                        </div>
                        <button type="button" name="button" id="toMine" class="sucbtn">领取</button>
                    </div>
                </div>
            </div>
            <div class="malert" id="changeError">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="duisuc" style="display: none;">
                        <div id="errorMsg" class="text">
                            不好意思,
                        </div>
                        <button type="button" name="button" id="closeErrorMsg" class="sucbtn">确定</button>
                    </div>
                </div>
            </div>
            <div class="malert" id="duanComfirm">
                <div class="dialog-cover" style="display: none;"></div>
                <div class="alertC" style="display: none;">
                    <div class="scomfirm" style="display: none;">
                        <span class="closeBtn"></span>
                        <div class="text">
                            <p>本次商品兑换，需要花费</p> <strong id="changePrice">0乐豆</strong></div>
                        <input type="hidden" id="goodsId" />
                        <button type="button" name="button" id="calChange" class="calbtn">取消</button>
                        <button type="button" name="button" id="sureChange" class="sucbtn">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/js/jquery-3.2.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="/static/js/swiper.min.js?time=<%=System.currentTimeMillis()%>"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        paginationClickable: true,
        autoplay: 2500,
    });
</script>
<script src="/static/js/home.js?time=<%=System.currentTimeMillis()%>" charset="utf-8"></script>

<script>
    $(function () {
        $('.huan').click(function() {
            console.log('huan')
            $('#duanComfirm .dialog-cover,#duanComfirm .alertC,#duanComfirm .scomfirm').fadeIn()
            $('#changePrice').html($(this).attr('data')+'乐豆');
            $('#goodsId').val($(this).attr('data-id'));
        })
        /**
         * 取消兑换
         */
        $('#calChange').click(function () {
            $('#duanComfirm .alertC ,#duanComfirm .dialog-cover').fadeOut()
        })
        /**
         *错误提示框关闭
         */
        $('#closeErrorMsg').click(function () {
            $('#changeError .dialog-cover,#changeError .alertC,#changeError .duisuc').fadeOut();
        })
        /**
         * 确认兑换
         */
        $('#sureChange').click(function () {
            var user = JSON.parse(localStorage.user);
            $.ajax({
                method: "POST",
                url: "/topfun/change/goods",
                data: {userId: user.userId,token:user.token,goodsId:$('#goodsId').val()},
                success: function (data) {
                    if(data){
                        $('#duanComfirm .dialog-cover,#duanComfirm .alertC ,#duanComfirm .scomfirm').fadeOut();//关闭兑换弹框
                        var result = JSON.parse(data);
                        if(result.code == 0){
                            $('#changeSuccess .dialog-cover,#changeSuccess .alertC,#changeSuccess .duisuc').fadeIn();
                        }else{
                            $('#errorMsg').html(result.msg);
                            $('#changeError .dialog-cover,#changeError .alertC,#changeError .duisuc').fadeIn();
                        }
                    }
                }
            }).fail(function () {
                alert("$.ajax /topfun/change/goods!");
            })
        })
        /**
         * 领取跳转我的
         */
        $('#toMine').click(function () {
            location.href = 'me.html';
        })


    })
</script>
</body>

</html>
